<template>
    <div id="diff-bound">
        <div>
            <el-row style="margin-top: 5px">
                <el-col :span="40">
                    <el-form :inline="true">
                        <el-form-item label="名称:">
                            <el-select v-model="queryDiff.diffCode" filterable size="mini" style="width: 120px">
                                <el-option v-for="i in saveBounds" :key="i.key" :label="i.diffName" :value="i.diffCode"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联范围:">
                            <el-input style="width: 120px" size="mini" v-model="queryDiff.boundCode" placeholder="范围编号" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="queryDiffSql()" v-preventReClick>查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-form :inline="true">
                <el-form-item>
                    <el-input style="width: 600px" type="textarea" :rows="10" placeholder="o32[sql]" v-model="boundSql.o32"> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input style="width: 600px" type="textarea" :rows="10" placeholder="risk[sql]" v-model="boundSql.risk"> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" icon="el-icon-star-off" circle @click="openSaveBoundSql()"></el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" icon="el-icon-edit" circle @click="openEditBoundSql()"></el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-row>
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="execEntryBranchSql(1)" v-preventReClick>执行恒生sql</el-button></el-col
                >
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="execEntryBranchSql(2)" v-preventReClick>执行风控sql</el-button></el-col
                >
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="diffEntryBranchSqlResult" v-preventReClick>明细勾对</el-button></el-col
                >
            </el-row>
        </div>
        <div style="overflow: auto; height: 500px" :style="{ display: isShowDiff ? 'none' : '' }">
            <code-diff :old-string="diffData.o32" :new-string="diffData.risk" file-name="diff-sql" output-format="side-by-side" />
        </div>
        <!-- 结果-->
        <div style="overflow: auto; height: 500px; border-radius: 2px" :style="{ display: isShowResult ? 'none' : '' }">
            <span>勾对结果:</span>
            <el-collapse accordion @change="handleChange">
                <el-collapse-item title="O32\风控存在且一致" name="1">
                    <div v-for="item in this.activeNames[0]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="O32\风控存在且不一致" name="2">
                    <div v-for="item in this.activeNames[1]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="O32有风控没有" name="3">
                    <div v-for="item in this.activeNames[2]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="风控有O32没有" name="4">
                    <div v-for="item in this.activeNames[3]" :key="item">{{ item }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div>
            <yh-dialog drag title="名称维护" :visible.sync="isShowSave" width="600px" :close-on-click-modal="false">
                <div style="width: 500px; margin: auto">
                    <el-form>
                        <el-form-item label="比对名称">
                            <el-input style="width: 240px" size="mini" v-model="boundSql.diffName" placeholder="名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="关联范围">
                            <el-input style="width: 240px" size="mini" v-model="boundSql.boundCode" placeholder="范围编号" clearable></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="reset">重 置</el-button>
                    <el-button size="mini" @click="closeModal">取 消</el-button>
                    <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </yh-dialog>
        </div>

        <div>
            <yh-dialog drag title="明细勾对" :visible.sync="visibleDiff" width="1000px" :close-on-click-modal="false">
                <div style="width: 900px; margin: auto">
                    <el-row style="margin-bottom: 5px">
                        <el-col>
                            <el-form :inline="true">
                                <el-form-item label="主键选择"></el-form-item>
                                <el-form-item label="O32:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectKeys.o32" size="mini">
                                        <el-option v-for="i in checkColums.o32" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="风控:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectKeys.risk" size="mini">
                                        <el-option v-for="i in checkColums.risk" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col>
                            <el-form :inline="true">
                                <el-form-item label="勾对字段"></el-form-item>
                                <el-form-item label="O32:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectColums.o32" size="mini">
                                        <el-option v-for="i in checkColums.o32" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="风控:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectColums.risk" size="mini">
                                        <el-option v-for="i in checkColums.risk" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="resetDiff">重 置</el-button>
                    <el-button size="mini" @click="closeModalDiff">取 消</el-button>
                    <el-button size="mini" type="primary" @click="onSubmitDiff">确 定</el-button>
                </div>
            </yh-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import * as api from './api/diff-bound';
import { CodeDiff } from 'v-code-diff';
@Component({
    name: 'DiffBound',
    components: {
        CodeDiff,
    },
})
export default class DiffBound extends Vue {
    mounted() {
        this.querySaveBounds();
    }
    visibleDiff: boolean = false;
    isShowDiff: boolean = true;
    isShowSave: boolean = false;

    isShowResult: boolean = true;
    selectBound: '';
    private queryDiff = {
        diffCode: '',
        boundCode: '',
    };
    saveBounds = [];
    private boundSql = {
        diffCode: '',
        diffName: '',
        o32: '',
        risk: '',
        boundCode: '',
    };
    private oldBoundSql = {
        diffCode: '',
        diffName: '',
        o32: '',
        risk: '',
        boundCode: '',
    };
    activeNames = [[], [], [], []];

    diffData = {
        o32: '',
        risk: '',
    };

    /**
     *勾对字段设置
     */
    private checkColums = {
        o32: [],
        risk: [],
    };

    /**
     *勾对字段选择
     */
    private selectColums = {
        o32: [],
        risk: [],
    };

    /**
     *勾对字段选择
     */
    private selectKeys = {
        o32: [],
        risk: [],
    };
    /**
     * 查询收藏的范围对比信息
     */
    querySaveBounds() {
        api.queryBound().then((res: any) => {
            this.saveBounds = res;
        });
    }
    /**
     * 下拉选择
     */
    queryDiffSql() {
        if (this.isEmpty(this.queryDiff.diffCode) && this.isEmpty(this.queryDiff.boundCode)) {
            this.yh_message_error('查询条件不能全部为空');
            return;
        }
        this.checkColums = {
            o32: [],
            risk: [],
        };

        var data = {
            diffCode: this.queryDiff.diffCode,
            boundCode: this.queryDiff.boundCode,
        };
        this.boundSql.diffCode = this.queryDiff.diffCode;
        api.queryBoundSql(data).then((res: any) => {
            if (this.isEmpty(res)) {
                this.boundSql.diffCode = '';
                this.boundSql.diffName = '';
                this.boundSql.o32 = '';
                this.boundSql.risk = '';
                this.boundSql.boundCode = '';
                this.boundSql.diffName = '';
            } else {
                this.oldBoundSql = res;
                this.boundSql.o32 = res.o32;
                this.boundSql.risk = res.risk;
                this.boundSql.boundCode = res.boundCode;
                this.boundSql.diffName = res.diffName;
            }
        });
    }
    /**
     * 保存sql
     */
    openSaveBoundSql() {
        if (this.isEmpty(this.boundSql.o32)) {
            this.yh_message_error('o32 sql不能为空');
            return;
        }
        if (this.isEmpty(this.boundSql.risk)) {
            this.yh_message_error('risk sql不能为空');
            return;
        }
        this.isShowSave = true;
        this.boundSql.diffCode = '';
    }

    openEditBoundSql() {
        if (this.isEmpty(this.boundSql.o32)) {
            this.yh_message_error('o32 sql不能为空');
            return;
        }
        if (this.isEmpty(this.boundSql.risk)) {
            this.yh_message_error('risk sql不能为空');
            return;
        }
        if (this.isEmpty(this.boundSql.diffCode)) {
            this.yh_message_error('需要先新增再编辑');
            return;
        }
        this.isShowSave = true;
        this.boundSql.diffCode = this.queryDiff.diffCode;
    }

    reset() {
        this.boundSql.diffName = '';
        this.boundSql.boundCode = '';
    }

    closeModal() {
        this.isShowSave = false;
    }

    onSubmit() {
        if (this.isEmpty(this.boundSql.diffName)) {
            this.yh_message_error('名称不能为空');
            return;
        }
        if (
            this.oldBoundSql.diffName === this.boundSql.diffName &&
            this.oldBoundSql.o32 === this.boundSql.o32 &&
            this.oldBoundSql.risk === this.boundSql.risk &&
            this.oldBoundSql.boundCode === this.boundSql.boundCode
        ) {
            var message = '';
            if (this.isEmpty(this.boundSql.diffCode)) {
                message = '不需要新增收藏';
            } else {
                message = '请重新编辑';
            }
            this.yh_message_warn('请注意没有任何变动!' + message);
            return;
        }
        this.isShowSave = false;
        var data = this.boundSql;
        api.saveBoundSql(data).then((res: any) => {
            this.yh_message_success('收藏成功');
            this.boundSql.diffCode = res;
            this.querySaveBounds();
        });
    }

    private execEntryBranchSql(sysLabel) {
        this.isShowDiff = false;
        var sql = '';
        var noticeName = '';
        if (sysLabel == 1) {
            sql = this.boundSql.o32;
            noticeName = 'O32 ';
        } else {
            sql = this.boundSql.risk;
            noticeName = '风控 ';
        }
        var data = {
            sysLabel: sysLabel,
            sql: sql,
            diffCode: this.boundSql.diffCode,
        };
        if (this.isEmpty(data.sql)) {
            this.yh_message_error(noticeName + 'sql 输入不能为空');
            return;
        }
        api.execBoundSql(data).then((res: any) => {
            if (sysLabel === 1) {
                this.diffData.o32 = res.result;
                this.checkColums.o32 = res.columns;
            } else {
                this.diffData.risk = res.result;
                this.checkColums.risk = res.columns;
            }
        });
    }
    /**
     * 比对结果
     */
    private diffEntryBranchSqlResult() {
        if (this.checkColums.o32.length < 1) {
            this.yh_message_warn('请先执行o32的SQL');
            return;
        }
        if (this.checkColums.risk.length < 1) {
            this.yh_message_warn('请先执行风控的SQL');
            return;
        }
        this.visibleDiff = true;
    }

    resetDiff() {
        this.selectColums = {
            o32: [],
            risk: [],
        };
        this.selectKeys = {
            o32: [],
            risk: [],
        };
    }

    closeModalDiff() {
        this.visibleDiff = false;
    }

    onSubmitDiff() {
        this.visibleDiff = false;
        var data = {
            keys: this.selectKeys,
            columns: this.selectColums,
            diffCode: this.boundSql.diffCode,
            o32: this.boundSql.o32,
            risk: this.boundSql.risk,
        };
        api.diffData(data).then((res: any) => {
            debugger;
            this.isShowResult = false;
            this.activeNames = res;
        });
    }

    isEmpty(obj) {
        return typeof obj == 'undefined' || obj == null || obj === '';
    }
}
</script>

<style lang="scss" scoped>
#diff-entry {
    width: 100%;
    height: 100%;
    min-width: 1400px;
}
</style>
